<script setup>
import { getStaff, delStaff } from "@/api/staff";
import { ref, reactive } from "vue";
import { Delete, Edit, Document } from "@element-plus/icons-vue";
import { timestampToTime } from "@/public/public";

import { useRouter } from "vue-router";

import { ElNotification } from "element-plus";

import { useUserStore, useSectorsStore } from "@/stores/counter";
const userStore = useUserStore();
const userMsg = userStore.userMsg;
const token = userMsg.token;
const sectorsStore = useSectorsStore();
const sectorMsg = sectorsStore.sectorsMsg;

const loading = ref(true);

const router = useRouter();
const staffData = ref([]);
function dealData(arr) {
  // 数据处理
  for (let i = 0; i < arr.length; i++) {
    // arr[i]
    if (arr[i].staffId) {
      // staff-3516fb16  14位
      arr[i].staffIdShow = arr[i].staffId.slice(0, 13);
    }
    // 性别 0男 1女
    arr[i].sexShow = arr[i].sex === 0 ? "男" : "女";

    // 正式员工0、合同工1、临时工2
    arr[i].staffTypeShow =
      arr[i].staffType === 0
        ? "正式员工"
        : arr[i].staffType === 1
        ? "合同工"
        : "临时工";

    arr[i].joinTimeShow = timestampToTime(arr[i].joinTime);
    // console.log(sectorMsg);
    let index = null;
    sectorMsg.some((v, ind) => {
      index = ind;
      return v.sectorId === arr[i].sectorId;
    });
    arr[i].sectorName = sectorMsg[index].sectorName;
    // 在职状态 "在职0、离职1、退休2"
    arr[i].workStatusShow =
      arr[i].workStatus === 0
        ? "在职"
        : arr[i].workStatus === 2
        ? "离职"
        : "退休";
  }
  return arr;
}
// 初始化
async function init() {
  const staffRes = await getStaff( {token} );

  console.log(staffRes);

  let oriData = staffRes.data.data;
  oriData = dealData(oriData);
  // 处理后赋值
  staffData.value = oriData;
  loading.value = false;
}
init();

const searchData = reactive({
  sectorId: "",
  staffType: null,
  workStatus: null,
  staffName: "",
  token,
});
async function search(ops) {
  const staffRes = await getStaff(ops);
  let oriData = staffRes.data.data;
  oriData = dealData(oriData);
  // 处理后赋值
  staffData.value = oriData;
  loading.value = false;
}

function detailRow(ops) {
  router.push({ name: "editstaff", params: { type: 0, id: ops.staffId } });
}

function edieRow(ops) {
  router.push({ name: "editstaff", params: { type: 1, id: ops.staffId } });
}
// 删除员工
const deleteRow = (val, ind,scope) => {
  console.log(scope)
  if(scope.row.staffName==="超级管理员") return ElNotification.error({
        title: "操作结果",
        message: '管理员不可以被删除',
        showClose: false,
      });
  delStaff(userStore.userMsg.token, val)
    .then(res => {
      console.log(res);
      ElNotification.success({
        title: "操作结果",
        message: res.data.msg,
        showClose: false,
      });
      staffData.value.splice(ind, 1);
    })
    .catch(err => {
      console.log(err);
      ElNotification.error({
        title: "操作结果",
        message: res.data.msg,
        showClose: false,
      });
    });
};
</script>

<template>
  <el-card class="box-card staff-view-search">
    <el-row :gutter="20">
      <el-form-item label="部门">
        <el-select
          v-model="searchData.sectorId"
          placeholder="选择部门"
          clearable>
          <el-option
            v-for="item in sectorMsg"
            :label="item.sectorName"
            :value="item.sectorId" />
        </el-select>
      </el-form-item>
      <el-form-item label="员工类型">
        <el-select
          v-model="searchData.staffType"
          placeholder="选择员工类型"
          clearable>
          <!-- 正式员工0、合同工1、临时工2 -->
          <el-option label="正式员工" :value="0" />
          <el-option label="合同工" :value="1" />
          <el-option label="临时工" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="在职状态">
        <el-select
          v-model="searchData.workStatus"
          placeholder="在职状态"
          clearable>
          <!-- 在职状态 "在职0、离职1、退休2" -->
          <el-option label="在职" :value="0" />
          <el-option label="离职" :value="1" />
          <el-option label="退休" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input
          v-model="searchData.staffName"
          placeholder="员工姓名"
          clearable />
      </el-form-item>
      <el-button type="success" plain @click.prevent="search(searchData)"
        >条件搜索</el-button
      >
      <el-button type="primary" plain @click.prevent="init">查看所有</el-button>
    </el-row>
    <!-- {{ searchData }} -->
  </el-card>

  <el-card class="box-card staff-view">
    <el-row :gutter="20">
      <el-col :span="6">
        <h3>员工列表</h3>
      </el-col>
      <el-col :span="3" :offset="15">
        <el-button
          type="primary"
          plain
          @click="
            $router.push({
              name: 'editstaff',
              params: { type: 2, id: 'addStaff' },
            })
          "
          >添加员工</el-button
        >
      </el-col>
    </el-row>
  </el-card>
  <el-table
    table-layout="auto"
    :data="staffData"
    height="450"
    style="width: 100%"
    stripe
    border
    empty-text="没有相关的数据呢"
    v-loading="loading">
    <el-table-column prop="staffIdShow" label="员工编号" align="center" />
    <el-table-column prop="staffName" label="员工姓名" align="center" />
    <el-table-column prop="sexShow" label="性别" align="center" />
    <el-table-column prop="job" label="岗位" align="center" />
    <el-table-column prop="sectorName" label="所属部门" align="center" />
    <el-table-column prop="staffTypeShow" label="员工类型" align="center" />
    <el-table-column prop="joinTimeShow" label="入职时间" align="center" />
    <el-table-column prop="workStatusShow" label="在职状态" align="center" />
    <el-table-column prop="tel" label="联系方式" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button
          color="#626aef"
          type="primary"
          size="small"
          :icon="Document"
          @click.prevent="detailRow(scope.row)">
        </el-button>
        <el-button
          type="primary"
          size="small"
          :icon="Edit"
          @click.prevent="edieRow(scope.row)">
        </el-button>
        <el-button
          type="warning"
          size="small"
          :icon="Delete"
          @click.prevent="deleteRow(scope.row.staffId, scope.$index,scope)">
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="less" scoped>
.staff-view-search {
  .el-row {
    margin-left: 0 !important;

    .el-form-item {
      margin: 0 20px 0 0;
    }
  }
}

.staff-view {
  margin: 30px 0;

  h3 {
    float: left;
  }

  .el-button {
    float: right;
  }
}
</style>
